var ns;
var app = new Vue({
    el: '#app',
    data: {
        userinfo: {
            id: 0,
            name: "",
            phone: "",
            relateType: 1,
            relateTypeDesc: "业主",
            idCardType: 1,
            idCardTypeDesc: "身份证",
            idCardNo: "",
            birthday: "",
            officeAddress: "",
            homeAddress: "",
            remark: "",
        },
        ID: 0,
        statelist: [  ],
        typelist: [],
    },
    methods: {
        do_select_time: function () {
            var that = this;
            api.openPicker({
                type: 'date',
                date: that.userinfo.birthday ,
                title: '选择日期'
            }, function (ret, err) {
                if (ret) {
                    var year = ret.year;
                    var month = (ret.month >= 10 ? ret.month : '0' + ret.month);
                    var day = (ret.day >= 10 ? ret.day : '0' + ret.day);
                    currentTime = year + '-' + month + '-' + day;
                    that.userinfo.birthday = currentTime;
                }
            });
        },
        save:function(){
            var that = this;
            if (that.userinfo.name=='') {
                api.toast({
                    msg: '请填写住户名称',
                    duration: 2000,
                    location: 'bottom'
                });
                return;
            }
          var options = {
              action: 'saverelateownerlistbyid',
              id: that.ID,
              name: that.userinfo.name,
              phone: that.userinfo.phone,
              relateType: that.userinfo.relateType,
              idCardType: that.userinfo.idCardType,
              idCardNo: that.userinfo.idCardNo,
              birthday: that.userinfo.birthday,
              officeAddress: that.userinfo.officeAddress,
              homeAddress: that.userinfo.homeAddress,
              remark: that.userinfo.remark,
          };
          ns.post(options, function(succeed, data, err) {
              if (succeed) {
                  api.toast({
                      msg: '保存成功',
                      duration: 500,
                      location: 'bottom'
                  });
                  setTimeout(function() {
                      api.sendEvent({
                          name: 'update_ueseinfo',
                      });
                  }, 500);
                  setTimeout(function() {
                      api.closeWin();
                  }, 500);
              } else if (err) {
                  api.toast({
                      msg: err,
                      duration: 10000,
                      location: 'bottom'
                  });
              }
          });
        },
        get_data: function(data, op) {
            var that = this;
            ns.post({
                id: that.ID,
                action: 'getrelateownerlistbyid'
            }, function (succeed, data, err) {
                if (succeed) {
                    that.userinfo = data.data;
                    that.statelist = data.relateTypeList;
                    that.typelist = data.idCardTypeList;

                    that.initPicker();//加载下拉列表数据
                } else {
                    api.toast({
                        msg: err,
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            })
        },
        initPicker: function () {
            var _this = this;
            (function ($, doc) {
                $.init();
                $.ready(function () {
                    // 选择项目
                    var pickerProject = new $.PopPicker({
                        layer: 1,
                        fileID: 'id',
                        fileName: 'name',
                    });
                    var projectData = _this.statelist || [];
                    pickerProject.setData(projectData);
                    var showProjectPickerButton = doc.getElementById('chooserelatetype');
                    showProjectPickerButton.addEventListener('click', function (event) {
                        pickerProject.show(function (items) {
                            _this.userinfo.relateType = items[0].value;
                            _this.userinfo.relateTypeDesc = items[0].text;
                            //返回 false 可以阻止选择框的关闭
                            //return false;
                        });
                    }, false);

                    // 选择类别
                    var categoryPicker = new $.PopPicker({
                        layer: 1,
                        fileID: 'id',
                        fileName: 'name',
                    });

                    var categoryData = _this.typelist || [];
                    categoryPicker.setData(categoryData);
                    var showCategoryPickerButton = doc.getElementById('chooseidcardtype');
                    showCategoryPickerButton.addEventListener('click', function (event) {
                        categoryPicker.show(function (items) {
                            _this.userinfo.idCardType = items[0].value;
                            _this.userinfo.idCardTypeDesc = items[0].text;
                            //返回 false 可以阻止选择框的关闭
                            //return false;
                        });
                    }, false);


                    var btn = document.querySelector('#choosedate');
                    btn.addEventListener('tap', function () {
                        var _self = this;
                        if (_self.picker) {
                            _self.picker.show(function (rs) {
                                _this.userinfo.birthday = rs.value;
                                _self.picker.dispose();
                                _self.picker = null;
                            });
                        } else {
                            var optionsJson = this.getAttribute('data-options') || '{}';
                            var options = JSON.parse(optionsJson);
                            var id = this.getAttribute('id');
                            _self.picker = new $.DtPicker(options);
                            _self.picker.show(function (rs) {
                                var timer = setTimeout(function () {
                                    clearTimeout(timer);
                                    _this.userinfo.birthday = rs.value;
                                }, 300);
                                _self.picker.dispose();
                                _self.picker = null;
                            });
                        }
                    }, false);

                });
            })(mui, document);
        },
    }
});
apiready = function() {
    api.parseTapmode();
    ns = window.Foresight.Util;
    if (api.pageParam.id) {
        app.ID = api.pageParam.id;
        app.get_data();
    }
}
